<template>
  <!--    <page-layout :title="description">-->
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="8" :lg="7" :md="8" :sm="24">
            <a-form-item label="结算单位" style="margin-bottom: 10px;">
              <a-select v-model="queryParam.settlementCompany" allowClear showSearch style="width: 100%"
                        placeholder="请选择结算单位">
                <a-select-option v-for="(item, key) in companyData" :key="key" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="7" :md="8" :sm="24">
            <a-form-item label="核销单据号" style="margin-bottom: 10px;">
              <a-input placeholder="核销单据号" v-model="queryParam.writeoffSerial"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="7" :md="8" :sm="24">
            <a-form-item label="核销人" style="margin-bottom: 10px;">
              <a-input placeholder="核销人" v-model="queryParam.createBy"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="6" :md="6" :sm="24">
            <a-form-item label="核销方式" style="margin-bottom:10px;">
              <a-radio-group v-model="queryParam.status" :default-value="1">
                <a-radio :value="1">
                  核销完成
                </a-radio>
                <a-radio :value="2">
                  部分核销
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="7" :md="8" :sm="24">
            <a-form-item label="收付方向" style="margin-bottom:10px;">
              <a-radio-group v-model="queryParam.payType">
                <a-radio :value="1">
                  应收
                </a-radio>
                <a-radio :value="2">
                  应付
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <!--          </template>-->
          <a-col :xl="8" :lg="7" :md="8" :sm="24">
            <span style="width: 100%" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <a-spin :spinning="confirmLoading"
            style="min-height: 400px !important;">
      <a-button style="margin-bottom: 10px;" @click="showCreateHx" type="primary" ghost icon="plus">
        新增核销
      </a-button>
      <a-table
        ref="table"
        :scroll="{x:1500,y:400}"
        size="small"
        bordered
        rowKey="id"
        :columns="columns"
        :components="components"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="confirmLoading"
        class="j-table-force-nowrap">
        <span slot="action" slot-scope="text, record">
      <a @click="showdetail(record)">详情</a>
          <span v-if="record.status == 2">
             <a-divider type="vertical" />
           <a @click="showedit(record)">继续核销</a>
          </span>

      <a-divider type="vertical" />
           <a-popconfirm title="确定取消吗？" @confirm="() => cancelhx(record.id)">
                  <a>取消</a>
                </a-popconfirm>
    </span>
      </a-table>
    </a-spin>
    <HxCreate v-if="hxVisible" ref="hxVisibleDrawer" @close="close"></HxCreate>
    <HxContinue v-if="hxConVisible" ref="hxConVisibleDrawer" @close="close"></HxContinue>
    <HxOnlySee v-if="hxOSVisible" ref="hxOSVisibleDrawer" @close="close"></HxOnlySee>
  </a-card>

  <!--    </page-layout>-->
</template>

<script>
import '@/assets/less/TableExpand.less'
import JDate from '@/components/jeecg/JDate.vue'
import PageLayout from '@/components/page/PageLayout'
import Vue from 'vue'

import HxCreate from './HxCreate'
import HxOnlySee from './HxOnlySee'
import HxContinue from './HxContinue'
import { getAction, deleteAction, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'invoiceInfo',
  mixins: [JeecgListMixin],
  components: {
    JDate,
    PageLayout,
    HxCreate,HxOnlySee,HxContinue
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
          const col = this.columns.find(col => {
            const k = col.dataIndex || col.key
            return k === key
          })

          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children])
          }

          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 1)
              }
            }
          }
          const drag = h('vue-draggable-resizable', { ...dragProps })
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
        }
      }
    }
    return {
      companyData: [],
      hxVisible: false,
      hxOSVisible:false,
      hxConVisible:false,
      description: '费用核销',
      confirmLoading: false,
      //列设置
      settingColumns: [],
      columns: [],
      // 表头
      defColumns: [
        {
          title: '#',
          dataIndex: 'rowIndex',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          fixed: 'left',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '核销状态',
          dataIndex: 'status',
          width: 100,
          customRender: function(t, r, index) {
            return t == 1 ? '核销完成' : '部分核销'
          }
        },
        {
          title: '核销单据号',
          dataIndex: 'writeoffSerial',
          width: 150
        },
        {
          title: '结算单位',
          dataIndex: 'settlementCompany',
          width: 260
        },
        {
          title: '核销日期',
          dataIndex: 'writeoffDate',
          width: 150
        },
        {
          title: '核销币种',
          dataIndex: 'writeoffCurrency',
          width: 100
        },
        {
          title: '核销汇率',
          dataIndex: 'writeoffRate',
          width: 80

        },
        {
          title: '单据总额(CNY)',
          dataIndex: 'writeoffAmount',
          width: 180
        }, {
          title: '实销金额',
          dataIndex: 'actualAmount',
          width: 100
        }, {
          title: '实销金额(CNY)',
          dataIndex: '实销金额(CNY)',
          width: 150,
          customRender: function(t, r, index) {
            return (r.actualAmount * r.writeoffRate).toFixed(2)
          }
        },
        {
          title: '收付款日期',
          dataIndex: 'typeDate',
          width: 100
        },
        {
          title: '收付方向',
          dataIndex: 'payType',
          width: 100,
          customRender: function(t, r, index) {
            return t == 1 ? '应收' : '应付'
          }
        },
        {
          title: '结算方式',
          dataIndex: 'settlementType',
          width: 100
        },
        {
          title: '支票号',
          dataIndex: 'checkNumber',
          width: 120
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: 200
        },
        {
          title: '核销人',
          dataIndex: 'createBy',
          width: 100
        },
        {
          title: '对方账户信息',
          dataIndex: 'invoiceContent',
          width: 200
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 200,
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 选择的行
      selectedRows: [],
      url: {
        list: '/writeoff/list',
        delete: '/box.ship/shipInfo/delete',
        deleteRow: '/writeoff/cancel',
        exportXlsUrl: '/box.ship/shipInfo/exportXls',
        importExcelUrl: '/box.ship/shipInfo/importExcel',
        queryById: '/box.ship/shipInfo/cost/queryCheckList',
        passurl: '/box.ship/shipInfo/cost/check',
        tjshRow: '/invoice/action/submit',
        rejectRow: '/invoice/action/reject',
        approvedRow: '/invoice/action/approved',
        revokeRow: '/invoice/action/revoke',
        cancelRow: '/invoice/action/cancel'

      },
      dictOptions: {},
      selectid: ''
    }
  },
  created() {
    this.loading = true
    this.initDict()
    // this.searchQuery()
    this.initColumns()
  },
  computed: {
    // importExcelUrl: function(){
    //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    // },
  },
  methods: {
    initDict() {
      let param = { isLock: 0, pageSize: 99999 }
      getAction('/companydata/list', param).then(res => {
        console.log(res.result.records)
        let companyDataList = []
        for (let i = 0; i < res.result.records.length; i++) {
          companyDataList.push({
            value: res.result.records[i].companyName,
            text: res.result.records[i].companyName
          })
        }
        this.companyData = companyDataList
      })
    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter(item => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },

    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ':colsettings'
      let colSettings = Vue.ls.get(key)
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = []
        this.defColumns.forEach(function(item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.settingColumns = allSettingColumns
        this.columns = this.defColumns
      } else {
        this.settingColumns = colSettings
        const cols = this.defColumns.filter(item => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (colSettings.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns = cols
      }
    },
    showCreateHx() {
      this.hxVisible = true
    },
    showdetail(val) {
      console.log(val)
     this.hxOSVisible = true
      this.$nextTick(() => {
        this.$refs.hxOSVisibleDrawer.requestRecord(val)
      })
    },
    showedit(val) {
      this.hxConVisible = true
      this.$nextTick(() => {
        this.$refs.hxConVisibleDrawer.requestRecord(val)
      })
    },
    cancelhx(val){
      let param = { id: val }
      deleteAction(this.url.deleteRow+"/"+val).then((res) => {
        console.log(res)
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loadData(1)
      })
    },
    close() {
      this.hxVisible = false
      this.hxOSVisible = false
      this.hxConVisible = false
      this.loadData(1)
    }

  }
}
</script>
<style>
.ant-table {
  min-height: 400px !important;
}

.ant-empty-normal {
  margin: 140px 0 !important;
}
</style>
<style lang="less">

.resize-table-th {
  position: relative;

  .table-draggable-handle {
    transform: none !important;
    position: absolute;
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }

  .table-color-dust {
    background-color: #F5222D;
  }
}
</style>
